<template>
  <!-- 团队管理 -->
  <div class="teams-manage">
    <div class="auth-title">审核管理</div>
    <div class="top-cell">
      <div class="avatar-wrapper">
        <!-- <img src="@/assets/image/platform-avatar.png" alt=""/> -->
        <span class="avatar-text">未设置</span>
      </div>
      <div class="top-center">
        <p class="names">
          <span class="real-name">真实姓名</span>
          <span class="shop-name">店铺名称</span>
        </p>
        <p class="shop-name">手机号：13996424785</p>
      </div>
      <p class="auth-btn" @click="jump('/inviteAuth')">去审核</p>
    </div>

    <div class="invite-cell">
      <p>当前账号数量：<span class="green-text">9个</span></p>
      <p class="invite-btn" @click="toggleDialog">邀请新成员</p>
    </div>

    <div class="shop-list">
      <div 
        class="shop-item" 
        v-for="(shop, shopIndex) in shopList" 
        :key="shopIndex">
        <div class="avatar-wrapper">
          <img src="@/assets/image/platform-avatar.png" alt=""/>
          <!-- <span class="avatar-text">未设置</span> -->
        </div>
        <div class="shop-center">
          <p class="member-name">{{ shop.shopName}}</p>
          <p class="member-mobile">手机号：13996424785</p>
        </div>
        <p class="view">查看账号</p>
      </div>
    </div>
    
    <!-- 邀请新成员弹窗 -->
    <van-popup v-model="showDialog">
      <div class="popup-content">
        <div class="dialog-title">邀请新成员</div>
        <div class="dialog-sub-title">长按下面的二维码保存并发送，邀请新成员填写信息加入！</div>
        <img src="@/assets/image/qr-code.png" alt="" class="qr"/>
        <div class="know-btn" @click="showDialog = false">知道了</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      showDialog: false,
      shopList: [],
      // shopList: [
      //   {
      //     shopName: '我是店铺名称1'
      //   },
      //   {
      //     shopName: '我是店铺名称1'
      //   },
      //   {
      //     shopName: '我是店铺名称1'
      //   },
      // ]
    }
  },
  computed: {
    ...mapGetters(['commonUrlPath'])
  },
  methods: {
    jump (path) {
      path = `${this.commonUrlPath}${path}`
      this.$router.push({ path })
    },
    toggleDialog () {
      this.showDialog = !this.showDialog
    }
  }
}
</script>

<style scoped>
::v-deep .van-popup {
  border-radius: 3.2vw;
}
::v-deep .van-overlay {
  background-color: rgba(0,0,0,.3);
}
.know-btn {
  width: 60.8vw;
  height: 8.53vw;
  line-height: 8.53vw;
  margin: 0 auto;
  text-align: center;
  border-radius: 1.1vw;
  background: #0A67FF;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  color: #FFFFFF;
}
.qr {
  display: block;
  width: 56vw;
  height: 56vw;
  margin: 0 auto 10.13vw;
}
.dialog-sub-title {
  margin-bottom: 3.2vw;
  line-height: 4.53vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  color: #333333;
}
.dialog-title {
  margin-bottom: 3.73vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  text-align: center;
  color: #333333;
}

.popup-content {
  box-sizing: border-box;
  padding: 3.2vw 5.33vw;
}

.invite-dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.3);
}
.view {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #006EDD;
}
.shop-center {
  flex: 1;
}
.member-name {
  margin-bottom: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.member-mobile {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #999999;
}
.avatar-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.shop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 19.2vw;
  margin-bottom: 3.2vw;
  box-sizing: border-box;
  padding: 0 2.67vw 0 3.2vw;
  border-radius: 2.13vw;
  background: #FFFFFF;
  border: 0.27vw solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.invite-btn {
  width: 19.47vw;
  height: 6.93vw;
  line-height: 6.93vw;
  text-align: center;
  border-radius: 1.07vw;
  background: #006EDD;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.green-text {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #00A5A6;
}
.invite-cell {
  display: flex;
  height: 6.93vw;
  margin-bottom: 4.8vw;
  justify-content: space-between;
  align-items: center;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #3D3D3D;
}


.auth-btn {
  width: 15.47vw;
  height: 7.47vw;
  line-height: 7.47vw;
  text-align: center;
  background: #FF7628;
  border-radius: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.names {
  margin-bottom: 1.07vw;
}
.top-center {
  flex: 1;
}
.shop-name {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #999999;
}
.real-name {
  margin-right: 3.2vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.top-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4vw 0 3.2vw;
  width: 89.6vw;
  height: 20.27vw;
  margin-bottom: 6.4vw;
  background: #FFFFFF;
  border-radius: 2.13vw;
  border: 0.27vw solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.avatar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12.27vw;
  height: 12.27vw;
  border-radius: 50%;
  margin-right: 2.13vw;
  background: rgba(0, 0, 0, 0.28);
}
.avatar-text {
  font-family: Source Han Sans CN;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #FFFFFF;
}
.teams-manage {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 21.33vw;
}
.auth-title {
  margin-bottom: 3.2vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FF7628;
}
</style>